<!--轮播图-->
<template>
  <div class="banner">
    <swiper :options="swiperOption" v-if="banner.length > 0">
      <swiper-slide
        v-for="item in banner"
        :key="item.id"
        :style="{ background : `url( '${item.url}' ) 50% 0px no-repeat` }"
      ></swiper-slide>
      <banner-nav></banner-nav>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
    </swiper>
  </div>
</template>
<script>
import bannerNav from "./Banner_nav"
export default {
  name: "homeBanner",
  data() {
    return {
      banner: [],
      goodscate: [], // 商品分类
      swiperOption: {
        spaceBetween: 30,
        effect: "fade",
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        observer:true,
        observeParents:true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    }
  },
  methods: {
    async shopping_num() {
      if (this.$store.state.UserInfor.user_id) {
        let user_id = this.$store.state.UserInfor.user_id
        let res = await this.$http({
          method: 'post',
          url: 'index/index/cartNum',
          data: {
            user_id
          }
        })
        if (res.data.State.Code == 200) {
          this.$store.commit('shopping_num', res.data.data)
        }
      }
    },

    httpInit() {
      let user_id = this.$store.state.UserInfor.user_id || ""
      this.$http({
        method: "post",
        url: "index/index/apiIndex",
        data: {
          user_id
        }
      })
        .then(response => {
          if (response.data.State.Code) {
            let DATA = response.data.data
            this.banner = DATA.carousel
            this.$store.commit("nav", DATA.navigation) // 把导航数组传递给vuex
            let goodscate = []
            DATA.goodscate[0].children.forEach(element => {
              element.children.map(ele => {
                goodscate.push(ele)
              })
            })
            let _goodscate = [...new Set(goodscate)]
            // console.log(_goodscate)
            this.$store.commit("bannerNav", _goodscate) // 把数组传递给vuex
          } else {
            console.log("数据异常")
          }
        })
        .catch(error => {
          console.log(error)
        })
    }
  },

  components: {
    bannerNav
  },

  mounted() {
    this.httpInit()
    this.shopping_num()
  }
}
</script>

<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 420px;
  position: relative;
  /deep/ .swiper-container {
    // 分頁器的樣式
    .swiper-pagination {
      bottom: 0px;
      z-index: 10;
       .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        opacity: 1;
        background: rgba(255, 255, 255, 0.7);
      }
       .swiper-pagination-bullet-active {
        opacity: 1;
        background: #ff7800;
      }
    }
    .swiper-wrapper {
      .swiper-slide {
        width: 100%;
        height: 420px;
      }
    }
  }
}
</style>





